<template>
  <div class="meteorological">
    <div class="meteorological-left">
      <div class="left-title">设备列表</div>
      <div class="left-content">
        <a-menu mode="inline" theme="light" :defaultOpenKeys="defaultOpenKeys" :selectedKeys="selectedKeys">
          <a-sub-menu key="m1">
            <template #icon><pull-request-outlined /></template>
            <template #title>气象站</template>
            <a-menu-item v-for="(item, index) in addressList" :key="item.deviceid" @click="site(item.deviceid, index)">
              <template #icon><PieChartOutlined /></template>
              <div class="circle"></div>
              <i> {{ item.name }}</i>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
    </div>
    <div class="meteorological-right">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuerys">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="9" :md="10" :sm="30">
              <a-form-item label="选择时间">
                <a-range-picker v-model="queryParam.buildTime" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuerys" icon="search">搜索</a-button>
                <a-button type="primary" @click="searchResets" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      <!-- 数据-->
      <div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="{
            total,
            showTotal: total => `共 ${total} 条`,
            showQuickJumper: true,
            pageSize: 10,
            onChange: page => onPageChange(page)
          }"
          :rowClassName="
            (record, index) => {
              let className = ''
              className = index % 2 === 0 ? 'light' : 'dark'
              return className
            }
          "
        >
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'meteorological',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      defaultOpenKeys: ['m1'],
      page: 1,
      total: 0,
      deviceid: '',
      queryParam: {
        buildTime: ''
      },
      starttime: '',
      endtime: '',
      columns: [
        {
          title: '',
          dataIndex: '',
          key: 'index',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '风力(m/s)',
          align: 'center',
          dataIndex: 'winds'
        },
        {
          title: '风速(m/s)',
          align: 'center',
          dataIndex: 'wind'
        },
        {
          title: '空气温度(°C)',
          align: 'center',
          dataIndex: 'tem'
        },
        {
          title: '空气湿度(%RH)',
          align: 'center',
          dataIndex: 'hum'
        },
        {
          title: '大气压力(mpm)',
          align: 'center',
          dataIndex: 'kpa'
        },
        {
          title: '光照度(lux)',
          align: 'center',
          dataIndex: 'lux'
        },
        {
          title: '瞬时雨量(mm)',
          align: 'center',
          dataIndex: 'currainfall'
        },
        {
          title: '当前雨量(mm)',
          align: 'center',
          dataIndex: 'rainfall'
        },
        {
          title: '日雨量(mm)',
          align: 'center',
          dataIndex: 'dayrainfall'
        },
        {
          title: '二氧化碳(ppm)',
          align: 'center',
          dataIndex: 'ppm'
        },
        {
          title: '同步时间',
          align: 'center',
          dataIndex: 'synctime'
        }
      ]
    }
  },
  created() {
    this.getTypeList()
  },
  computed: {},
  methods: {
    //搜索
    searchQuerys() {
      this.starttime = moment(this.queryParam.buildTime[0]['_d']).format('YYYY-MM-DD')
      this.endtime = moment(this.queryParam.buildTime[1]['_d']).format('YYYY-MM-DD')
      this.getList(this.page, this.deviceid, this.starttime, this.endtime) //数据信息列表
    },
    //重置
    searchResets() {
      this.page = 1
      this.starttime = ''
      this.endtime = ''
      this.queryParam.buildTime = ''
      this.selectedKeys = this.addressList[0]['deviceid']
      console.log("11111");
      // setTimeRest(new Date())
      
      this.getList(this.page, this.addressList[0]['deviceid'], this.starttime, this.endtime)
    },
    //页码改变的回调
    onPageChange(page) {
      this.getList(page, this.deviceid, this.starttime, this.endtime) //数据信息列表
    },
    //站点左侧数据
    getTypeList() {
      this.addressList = [
        {
          id: '1',
          deviceid: '20',
          name: '气象站1-抚远'
        },
        {
          id: '2',
          deviceid: '21',
          name: '气象站2-抚远'
        },
        {
          id: '3',
          deviceid: '22',
          name: ' 气象站3-抚远'
        },
        {
          id: '4',
          deviceid: '23',
          name: ' 气象站4-抚远'
        },
        {
          id: '5',
          deviceid: '24',
          name: ' 气象站5-抚远'
        },
        {
          id: '6',
          deviceid: '25',
          name: ' 气象站6-抚远'
        }
      ]
      this.selectedKeys = [this.addressList[0]['deviceid']]
      this.deviceid = this.addressList[0]['deviceid']
      this.getList(this.page, this.addressList[0]['deviceid'], this.starttime, this.endtime)
      getAction('http://112.102.225.89:51006/zwgl/dtwlwjc/zwglDtsb/getqxzlb').then(res => {
        this.addressList = res.result
      })
      console.log('12', this.addressList)
    },
    //站点右侧数据
    getList(page, deviceid, starttime, endtime) {
      console.log(page)
      console.log(deviceid)
      this.dataSource = [
        {
          id: 1,
          deviceid: '1',
          winds: '0.2级',
          wind: '1.6m/s',
          tem: '4.1℃',
          hum: '68.3%RH',
          kpa: '-34Kpa',
          lux: 'Lux',
          currainfall: '0mm',
          rainfall: '0mm',
          dayrainfall: '0.4mm',
          ppm: '0 ppm',
          synctime: '2023-04-15 10:00:23'
        },
        {
          id: 2,
          deviceid: '2',
          winds: '0.2级',
          wind: '1.6m/s',
          tem: '4.1℃',
          hum: '68.3%RH',
          kpa: '-34Kpa',
          lux: 'Lux',
          currainfall: '0mm',
          rainfall: '0mm',
          dayrainfall: '0.4mm',
          ppm: '0 ppm',
          synctime: '2023-04-15 10:00:23'
        },
        {
          id: 3,
          deviceid: '3',
          winds: '0.2级',
          wind: '1.6m/s',
          tem: '4.1℃',
          hum: '68.3%RH',
          kpa: '-34Kpa',
          lux: 'Lux',
          currainfall: '0mm',
          rainfall: '0mm',
          dayrainfall: '0.4mm',
          ppm: '0 ppm',
          synctime: '2023-04-15 10:00:23'
        }
      ]
      let result = {}
      getAction('http://localhost:51006/zwgl/dtwlwjc/zwglShangqing/qixiang', {
        page: page,
        deviceid: deviceid,
        starttime: starttime,
        endtime: endtime
      }).then(res => {
        result = res.result
        // console.log(res)
        this.dataSource = result.records
        this.total = result.total
      })
    },
    //站点点击切换数据
    site(deviceid, index) {
      this.selectedKeys = [this.addressList[index]['deviceid']]
      this.deviceid = deviceid
      this.page = 1
      this.starttime = ''
      this.endtime = ''
      this.getList(this.page, deviceid, this.starttime, this.endtime)
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style scoped>
.meteorological {
  margin: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
}
.meteorological-left {
  width: 20%;
  height: 700px;
  min-height: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}
.meteorological .circle {
  background: #30b08f;
  clip-path: circle(50%);
  height: 10px;
  width: 10px;
  margin-right: 10px;
}
.meteorological-left .ant-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.left-title {
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  font-size: 15px;
}
.meteorological-right {
  width: 80%;
  margin: 0px 20px;
}

.light {
  background: #001f4f !important;
}
.dark {
  background: #07376a !important;
}
</style>

